<template name="card">
  <article id="card-wrapper">
    <header id="card-caption" class="editable-region">
      <div class="static-view">
        <span>{{ name }}</span>
      </div>
      <div class="edit-view">
        <textarea type="text" placeholder="Please type card name">{{ name }}</textarea>
        <button type="button" class="btn btn-default btn-cacel">
          <i class="fa fa-remove"></i>  Cancel
        </button>
        <button type="button" class="btn btn-default btn-save">
          <i class="fa fa-save"></i> Save
        </button>
      </div>
      <div id="card-menu" class="btn-group">
        <a class="btn btn-default menu-caption" href="#"><i class="fa fa-cog"></i> Menu</a>
        <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#"><span class="fa fa-sort-desc"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#" id="add-cli-option"><i class="fa fa-plus"></i> Checklist items</a></li>
          <li><a href="#"><i class="fa fa-group"></i> Members</a></li>
          <li><a href="#"><i class="fa fa-tag"></i> Tags</a></li>
          <li><a href="#"><i class="fa fa-calendar"></i> Duedate</a></li>
          <li><a href="#"><i class="fa fa-paperclip"></i> Attachment</a></li>
          <li><a href="#"><i class="fa fa-eye"></i> Focus</a></li>
        </ul>
      </div>
    </header>
    <section  id="card-content">
      <ul class="checklist"></ul>
    </section>
    <footer id="card-footer">
      <i class="fa fa-times-circle close-btn"></i>
    </footer>
  </article>
</template>